<template>
    <Modal
        v-model="detailModalData.show"
        title="漏洞详情"
        footer-hide
        :width="800"
        class="my-modal">
        <div class="item-table">
            <p>
                <span class='label'>漏洞名称</span>
                <span>{{detailInfo.name}}</span>
            </p>
            <p>
                <span class='label'>解决方法</span>
                <span>{{detailInfo.sulotion}}</span>
            </p>
            <p>
                <span class='label'>参考资料地址</span>
                <span>{{ detailInfo.publicUrl }}</span>
            </p>
            <p>
                <span class='label'>CVSSV2</span>
                <span>{{ detailInfo.cvssv2 }}</span>
            </p>
            <p>
                <span class='label'>CVE</span>
                <span>{{ detailInfo.cve }}</span>
            </p>
            <p>
                <span class='label'>CWE</span>
                <span>{{ detailInfo.cwe }}</span>
            </p>
            <p>
                <span class='label'>TVID</span>
                <span>{{ detailInfo.tvid }}</span>
            </p>
            <p>
                <span class='label'>CNNVD</span>
                <span>{{ detailInfo.cnnvd }}</span>
            </p>
            <p>
                <span class='label'>是否危险插件</span>
                <span>{{ detailInfo.isPlugin === 'Y' ? '是' : '否' }}</span>
            </p>
            <p>
                <span class='label'>威胁评分</span>
                <span>{{ detailInfo.value }}</span>
            </p>
            <p>
                <span class='label'>漏洞评级</span>
                <span>{{ vulnerabilityLevelEscape(detailInfo.level).text }}</span>
            </p>
            <p>
                <span class='label'>处置优先级</span>
                <span>{{ vulnerabilityDisposalPriorityEscape(detailInfo.disposalPriority).text }}</span>
            </p>
            <p>
                <span class='label'>附件</span>
                <span>
                    <template v-if="detailInfo.fileId">
                        <a href="javascript:;" @click="download(detailInfo)">{{ detailInfo.fileName }}</a>
                    </template>
                    <template v-else>
                    </template>
                </span>
            </p>
            <p>
                <span class='label'>描述</span>
                <span>{{ detailInfo.description }}</span>
            </p>
        </div>
    </Modal>
</template>

<script>
import {
    queryProductVulnerability
} from '../api/vulnerability'
import * as vulnerabilityLogic from '../logic/vulnerabilityLogic'
export default {
    name: 'VulnerabilityDetail',
    data() {
        return {
            detailModalData: {
                show: false
            },
            detailInfo: {}
        }
    },
    methods: {
      vulnerabilityLevelEscape(level){
        return vulnerabilityLogic.vulnerabilityLevelEscape(level)
      },
      vulnerabilityDisposalPriorityEscape(disposal){
        return vulnerabilityLogic.vulnerabilityDisposalPriorityEscape(disposal)
      },
        // 下载文件
        download(item) {
            if (!item.fileId) {
                return
            }
            let a = document.createElement('a');
            let fileName = item.fileName; //filename名称截取
            a.href = `/api/minio/download/${item.fileId}`;
            a.download = fileName; //命名下载名称
            a.click(); //点击触发下载
        },
        getVulnerabilityDetail(id) {
            queryProductVulnerability({
                id,
                pageIndex: 1,
                pageSize: 1
            }).then(({ code, message, data = {} }) => {
                if (code !== 1) {
                    this.$Message.warning(message)
                    return
                }
                this.detailModalData.show = true
                this.detailInfo = (data.items || [])[0] || {}
            })
        },
    }
}
</script>

<style scoped>
.item-table {
  display: table;
  width: 100%;
  border: 1px solid #eee;
  table-layout: fixed;
  word-break: break-all;
}
.item-table p {
  display: table-row;
  line-height: 36px;
  text-align: center;
}
.item-table p span {
  display: table-cell;
  border-bottom: 1px solid #eee;
}
.ios-alert {
  /* position: absolute;
        top: -44px;
        right: -404px; */
  color: orange;
  font-size: 16px;
  cursor: pointer;
}
.too {
  position: absolute;
  left: 113px;
  top: -1px;
}
</style>
